<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="mode==='add'?'添加如意Lite终端':'编辑如意Lite终端'"
    :close-on-click-modal="false"
    width="750px"
    top="10vh"
    @close="close"
  >
    <el-form ref="form" v-loading="loading" :model="form" :disabled="mode!=='add'" :rules="rules" label-width="120px" size="small">
      <el-form-item label="店铺：" prop="shopId">
        <el-select v-model="form.shopId" filterable clearable placeholder="请选择">
          <el-option
            v-for="item in shopOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="支付宝商户号：" prop="merchantItem">
        <el-select v-model="form.merchantItem" filterable value-key="selectId" clearable placeholder="请选择" @change="merchantItemChange">
          <el-option
            v-for="item in alipayLiteMchOptions"
            :key="item.id"
            :label="`${item.merchantType===1?'间连':'直连'} / ${item.merchantNo}${item.remark?' / '+item.remark:''}`"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="支付宝门店：" prop="aliShopItem">
        <el-select v-model="form.aliShopItem" filterable clearable value-key="aliShopId" :disabled="!form.merchantItem" placeholder="请先选择支付宝商户号">
          <el-option
            v-for="item in alipayLiteShopOptions"
            :key="item.aliShopId"
            :label="`${item.aliShopName} / ${item.aliShopId}`"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="机具SN号：" prop="deviceSn">
        <el-input v-model.trim="form.deviceSn" maxlength="50" show-word-limit placeholder="请输入" />
      </el-form-item>
      <el-form-item label="酷点设备号：" prop="kdDeviceNo">
        <el-input v-model.trim="form.kdDeviceNo" maxlength="50" show-word-limit placeholder="请输入" />
      </el-form-item>

      <el-form-item label="备注：">
        <el-input v-model="form.remark" placeholder="请输入" maxlength="30" show-word-limit />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" round @click="hide">取 消</el-button>
      <el-button size="small" round type="primary" @click="submitForm">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { bindRuYiLite, alipayLiteMchList, alipayLiteShopList } from '@/api/mch/equipment'
import { allShopList } from '@/api/mch/shop'

export default {
  data() {
    return {
      // 校验字段相关
      rules: {
        shopId: [
          {
            required: true,
            message: '请选择店铺',
            trigger: ['change', 'blur']
          }
        ],
        merchantItem: [
          {
            required: true,
            message: '请选择',
            trigger: ['change', 'blur']
          }
        ],
        aliShopItem: [
          {
            required: true,
            message: '请选择',
            trigger: ['change', 'blur']
          }
        ],
        kdDeviceNo: [
          {
            required: true,
            message: '请输入',
            trigger: ['change', 'blur']
          }
        ],
        deviceSn: [
          {
            required: true,
            message: '请输入',
            trigger: ['change', 'blur']
          }
        ]
      },
      // 配置
      title: null,
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: false,
      loading: false,
      // 数据
      mode: 'add',
      shopOptions: [],
      alipayLiteMchOptions: [],
      alipayLiteShopOptions: [],
      form: {
        businessId: null,
        shopId: null,
        merchantItem: null,
        type: null,
        merchantNo: null,
        bindUserId: null,
        aliShopItem: null,
        aliShopId: null,
        aliShopName: null,
        deviceSn: null,
        kdDeviceNo: null,
        remark: null
      }
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {

  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    // 弹框相关
    open({ mode = 'add', row = null }) {
      this.fetchAllShopOptions()
      this.fetchAlipayLiteMchOptions()
      this.mode = mode
      if ((this.mode === 'edit' || this.mode === 'unBind') && row) {
        const params = Object.assign({}, row)
        this.fetchAlipayLiteShopOptions(params.merchantId)
        const { merchantType, merchantId, alipayShopId, alipayShopName } = params
        params.merchantItem = {
          merchantNo: merchantId,
          bindUserId: merchantType === 0 ? merchantId : null,
          merchantType: merchantType
        }
        params.aliShopItem = {
          aliShopId: alipayShopId,
          aliShopName: alipayShopName
        }
        console.log(params)
        this.form = params
      }
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    close() {
      this.form = {
        businessId: null,
        shopId: null,
        merchantItem: null,
        type: null,
        merchantNo: null,
        bindUserId: null,
        aliShopItem: null,
        aliShopId: null,
        aliShopName: null,
        deviceSn: null,
        kdDeviceNo: null,
        remark: null
      }
      this.$refs.form.resetFields()
      this.loading = false
    },

    /**
     * 数据组
     */
    // 获取所有商户号列表
    fetchAllShopOptions() {
      const params = {
        businessId: this.$route.query.mchId
      }
      this.loading = true
      allShopList({ params }).then(res => {
        this.shopOptions = res.data || []
      }).finally(() => {
        this.loading = false
      })
    },

    // 支付宝商户列表
    fetchAlipayLiteMchOptions() {
      const params = {
        businessId: this.$route.query.mchId
      }
      const that = this
      alipayLiteMchList({ params }).then(res => {
        that.alipayLiteMchOptions = res.data.map(item => {
          item.selectId = item.merchantNo + item.merchantType
          return item
        }) || []
      })
    },

    // 支付宝列表
    fetchAlipayLiteShopOptions(pid) {
      const params = {
        pid: pid
      }
      alipayLiteShopList({ params }).then(res => {
        this.alipayLiteShopOptions = res.data || []
      })
    },
    /**
     * 按钮组
     */
    // 保存
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const data = Object.assign({}, this.form)
          data.type = data.merchantItem.merchantType
          data.merchantNo = data.merchantItem.merchantNo
          data.bindUserId = data.merchantItem.bindUserId
          data.aliShopId = data.aliShopItem.aliShopId
          data.aliShopName = data.aliShopItem.aliShopName
          data.businessId = this.$route.query.mchId
          delete data.merchantItem
          delete data.aliShopItem
          bindRuYiLite({ data }).then(() => {
            this.$root.$emit('refreshMchEquipmentRuYiLiteList')
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
            this.hide()
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },

    /**
     * 状态组
     */
    // 商户change
    merchantItemChange(val) {
      this.form.aliShopItem = null
      this.fetchAlipayLiteShopOptions(val.merchantType === '直连' ? val.merchantNo : val.bindUserId)
    }
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-select {
  width: 100%;
}

.el-checkbox {
  width: 120px;
}
</style>
